<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>博客列表</title>
    <link rel="stylesheet" href="./css/common.css?v=1" />
    <link rel="stylesheet" href="./css/list.css" />
  </head>

  <body>
    <!-- 导航栏 -->
    <div class="nav">
      <!-- logo -->
      <img src="./images/logo_003.jpg" alt="" />
      <div class="content">
        <span>我的博客系统</span>
        <div class="opts">
          <a href="./blog_list.html">主页</a>
          <a href="./blog_eidt.html">写博客</a>
          <a href="logout">注销</a>
        </div>
      </div>
    </div>
    <!-- 正文部分 -->
    <div class="container">
      <!-- 左边区域 -->
      <div class="container-left">
        <div class="card">
          <img src="./images/nz1.jpeg" alt="" />
          <h3></h3>
          <a href="#">Github</a>
          <div class="counter">
            <span>文章</span>
            <span>分类</span>
          </div>
          <div class="counter">
            <span>2</span>
            <span>1</span>
          </div>
        </div>
      </div>
      <!-- 右边区域 -->
      <div class="container-right"></div>
    </div>
  </body>
  <!-- 引入common.js -->
  <script src="js/common.js"></script>
  <!-- 引入jQuery -->
  <!-- 相对路径 -->
  <script src="js/jquery-3.6.3.min.js"></script>
  <script>
    // 发送AJAX 请求
    $.ajax({
      // 方法类型
      type: "get",
      // URL
      url: "blog",
      // 回调
      success: function (data) {
        console.log(data);
        // 构建页面的方法
        buildBlogList(data);
      },
      error: function () {
        console.log("获取博客列表失败");
      },
    });

    // 定义构建页面的方法
    function buildBlogList(data) {
      // <div class="blog-content">
      //     <div class="blog-title">
      //         这是我的第一篇博客
      //     </div>
      //     <div class="blog-datetime">
      //         2023-03-18 10:50:06
      //     </div>
      //     <div class="content">
      //         内容
      //     </div>
      //     <div class="aEl">
      //         <a href="./blog_details.html?blogId=1">查看全文 &gt;&gt; </a>
      //     </div>
      //     <hr>
      // </div>
      // 获取右侧容器DIV
      let containerEl = document.querySelector(".container-right");
      // 遍历
      data.forEach((blog) => {
        // 创建博客的DIV
        let blogEl = document.createElement("div");
        blogEl.className = "blog-content";

        // 创建Title的Div
        let titleEl = document.createElement("div");
        titleEl.className = "blog-title";
        // 设置Title的内容
        titleEl.innerHTML = blog.title;
        // 添加到博客的DIV中
        blogEl.appendChild(titleEl);

        // 创建创建时间的Div
        let datetimeEl = document.createElement("div");
        datetimeEl.className = "blog-datetime";
        // 设置datetime的内容
        datetimeEl.innerHTML = formatDate(blog.createTime);
        // 添加到博客的DIV中
        blogEl.appendChild(datetimeEl);

        // 创建content的Div
        let contentEl = document.createElement("div");
        contentEl.className = "content";
        // 设置content的内容
        contentEl.innerHTML = blog.content;
        // 添加到博客的DIV中
        blogEl.appendChild(contentEl);

        // 创建a 标签的Div
        let aDivEl = document.createElement("div");
        aDivEl.className = "aEl";
        let aEl = document.createElement("a");
        aEl.href = "blog_details.html?blogId=" + blog.id;
        aEl.innerHTML = "查看全文 &gt;&gt; ";
        aDivEl.appendChild(aEl);
        blogEl.appendChild(aDivEl);

        // 创建hr
        let hrEl = document.createElement("hr");
        blogEl.appendChild(hrEl);

        // 加入到博客列表
        containerEl.appendChild(blogEl);
      });
    }

    // 处理强制用户登录的逻辑
    $.ajax({
      // 请求的方法
      type: "get",
      url: "user",
      // 成功的回调
      success: function (data) {
        console.log("检验能过...");
        console.log("检验能过...");
        // 获取用户名的标签，替换成具体的用户名
        let usernameEl = document.querySelector(".container-left>.card>h3");
        usernameEl.innerHTML = data.username;
      },
      // 专门用来处理不同状态码的属性
      // 这个属性本身也是一个对象，状态码是他的属性，状态是多少可以自定义
      // 状态码对应的类型是function,通过指定不同状态码的functino来实现不同的处理逻辑
      statusCode: {
        403: function () {
          console.log("没有登录，请登录...");
          // 强制跳转到登录页面
          location.assign("blog_login.html");
        },
      },
    });
  </script>
</html>
